<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>My JSP 'edit_user_role.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<link href="${ctx }/css/bootstrap.min.css" rel="stylesheet">
<link href="${ctx }/css/plugins/multiselect/multi-select.css "
	rel="stylesheet">
<link href="${ctx }/css/plugins/multiselect/application.css "
	rel="stylesheet">
<link href="${ctx }/css/style.css?v=4.1.0" rel="stylesheet">
<script src="${ctx }/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx }/js/bootstrap.min.js?v=3.3.6"></script>
<script src="${ctx}/js/plugins/multiselect/jquery.multi-select.js"></script>
<!-- layer javascript -->
<script src="${ctx }/js/plugins/layer/layer.min.js"></script>
</head>


<input type="hidden" name="role_ids" id="role_ids" value="${role_ids }">
<input type="hidden" name="user_id" id="user_id" value="${user_id }">

<div class="form-group">
	<select id='custom-headers' multiple='multiple'>
		<c:forEach items="${userRoleList }" var="rolelist">
			<option value="${rolelist.id}">${rolelist.name}</option>
		</c:forEach>
		<c:forEach items="${noUserRoleList }" var="norRolelist">
			<option value="${norRolelist.id}" selected>${norRolelist.name}</option>
		</c:forEach>
	</select>
</div>

<div class="form-group">
	<div class="col-sm-8 col-sm-offset-3">
		<button type="button" class="btn btn-white" id="closeWin">关闭</button>
		<button type="button" class="btn btn-primary" id="save">保存</button>
	</div>
</div>

<script type="text/javascript">
	$('#custom-headers').multiSelect({
		selectableHeader : "<div class='custom-header'>已授权</div>",
		selectionHeader : "<div class='custom-header'>未授权</div>",
		afterSelect : function(values) {
			var v_roles = $("#role_ids").val();
			var v_role = v_roles.replace(values, "");
			$("#role_ids").val(v_role);

		},
		afterDeselect : function(values) {
			var v_roles = $("#role_ids").val();
			var v_role;
			if (v_roles == "") {
				v_role = values;
			} else {
				v_role = v_roles + ";" + values;
			}
			$("#role_ids").val(v_role);
		}
	});

	$('#save').click(function(role_ids, user_id) {
		var role_ids = $("#role_ids").val();
		var user_id = $("#user_id").val();
		$.ajax({
			type : "post",
			url : "${ctx }/security/user/doUserRole",
			dateType : "json",
			data : {
				"role_ids" : role_ids,
				"user_id" : user_id
			},
			success : function(data) {
				if (data == "0") {
					layer.alert('修改用户权限成功！', {
						icon : 1
					}, function(index) {
						//刷新表格数据
						window.parent.sysUserRoleClose('0');
						//关闭提示框
						layer.close(index);
					});
				} else {
					layer.alert('修改用户1权限失败！', {
						icon : 2
					});
				}
				;
			},
			error : function() {
				layer.alert('修改用户2权限失败！', {
					icon : 2
				});
			}
		});
		return false;
	});

	$('#closeWin').click(function() {
		window.parent.sysUserRoleClose('1');
	});
</script>


</html>
